@import "variables.less";
@import "../../lib/bootstrap-3.3.7/less/mixins/buttons.less";
@import "../../lib/bootstrap-3.3.7/less/mixins/text-emphasis.less";
@import "../../lib/bootstrap-3.3.7/less/mixins/background-variant.less";

.mobile-page {
    width           : 100%;
    height          : 100%;
    position        : absolute;
    overflow-x      : hidden;
    overflow-y      : hidden;
    background-color: #fff;
    box-shadow      : -10px 0px 10px 0px rgba(0, 0, 0, 0.2);

    .validationMessage {
        color      : red;
        font-weight: bold;
    }

    .container {
        width: 100%;
    }

    footer {
        background-color: @body-bg;
        width           : 100%;
        position        : absolute;
        bottom          : 0;
        z-index         : 100;
    }

    header {
        background-color: @body-bg;
        width           : 100%;
        position        : absolute;
        top             : 0;
        z-index         : 100;
        @nav-padding-top: 8px;

        nav {
            height  : @navbar-height;
            width   : 100%;
            position: absolute;
            z-index : 200;

            .right-button,
            .rightButton {
                border-radius: 15px;
                font-size    : 18px;
                float        : right;
                margin       : 12px 10px 0px 0px;
                height       : 30px;
                width        : 30px;
                border       : none;
                color        : inherit;
                background   : none;
            }

            .left-button,
            .leftButton {
                border-radius: 15px;
                font-size    : 18px;
                float        : left;
                margin       : 12px 0px 0px 10px;
                height       : 30px;
                width        : 30px;
                border       : none;
                color        : inherit;
                background   : none;
            }

            h4 {
                color     : @body-bg;
                font-size : 18px;
                height    : @nav-height;
                padding   : @nav-padding-top 0 0 0;
                text-align: center;
            }
        }
    }

    section {
        position                  : absolute;
        width                     : 100%;
        height                    : 100%;
        overflow-y                : auto;
        overflow-x                : hidden;
        -webkit-user-drag         : none;
        // -webkit-user-select    : none;
        -webkit-overflow-scrolling: touch;

        li {
            list-style: none;
        }
    }

    .norecords {
        text-align : center;
        padding-top: @norecords-padding-top;
        width      : 100%;

        .icon {
            position        : relative;
            width           : 160px;
            height          : 160px;
            left            : 50%;
            margin-left     : -80px;
            border-radius   : 50%;
            background-color: #eeeeee;

            i {
                position : relative;
                top      : 30px;
                font-size: 120px;
                display  : block;
                color    : white;
            }

            .icon-rss {
                -moz-transform   : rotate(-45deg);
                -ms-transform    : rotate(-45deg);
                -o-transform     : rotate(-45deg);
                -webkit-transform: rotate(-45deg);
                transform        : rotate(-45deg);
                position         : relative;
                top              : 14px;
                left             : 3px;
            }
        }

        .text {
            padding-top: 10px;
            font-size  : 16px;
        }

        button {
            margin-top: 10px;
        }
    }

    ul,
    ol {
        margin-bottom: 0;
        padding      : 0;
    }

    .price {
        color      : #f70;
        font-weight: bold;
    }

    .settlement {

        width        : 100%;
        height       : 50px;
        padding-top  : 10px;
        padding-right: 10px;

        padding-top   : 10px;
        padding-bottom: 10px;
        border-top    : 1px solid #ccc;

        .btn {
            min-width: 80px;
        }

        i.icon-shopping-cart {
            font-size  : 28px;
            margin-left: 14px;
            margin-top : 14px;
        }

        i.icon-ok-sign,
        i.icon-circle-blank {
            font-size: 20px;
            position : relative;
            top      : 3px;
        }

        label {
            padding-right: 10px;
            padding-top  : 2px;
        }

        .badge {
            position: relative;
            top     : -10px;
            left    : -4px;
        }

        .select-all {
            position  : absolute;
            left      : 4px;
            top       : 12px;
            border    : none;
            background: none;

            span.text {
                position: absolute;
                width   : 40px;
                top     : 5px;
            }
        }
    }

    .empty {
        text-align    : center;
        padding-top   : 20px;
        padding-bottom: 20px;
    }

    .loading {
        text-align    : center;
        padding-top   : 20px;
        padding-bottom: 20px;
    }

    a {
        color: inherit;
    }
}

body {
    margin : 0;
    padding: 0;
}

article.mobile-page.topbar-padding {
    @padding-top: 50px;
    padding-top : @padding-top;

    section {
        height: calc(~'100% - @{padding-top}');
    }
}

//=============================================================================
// rewrite bootstrap style
.mobile-page {
    .btn-primary {
        @btn-primary-bg    : @brand-primary;
        @btn-primary-border: darken(@btn-primary-bg, 5%);
        .button-variant(#fff; @btn-primary-bg; @btn-primary-border);
    }

    .text-primary {
        .text-emphasis-variant(@brand-primary);
    }

    :focus {
        outline     : none;
        border-color: unset;
        box-shadow  : unset;
    }

    .bg-primary {
        // Given the contrast here, this is the only class to have its color inverted
        // automatically.
        color: #fff;
        .bg-variant(@brand-primary);
    }

    .input {
        box-shadow: unset;
    }
}

//=============================================================================
// 控件

.mobile-page.topbar-padding {
    ul.tabs {
        top: @nav-height;
    }
}

.mobile-page {
    ul.tabs {
        opacity : 0.9;
        margin  : 0;
        padding : 0;
        position: absolute;

        top: 0;

        width  : 100%;
        z-index: 100;

        li {
            float           : left;
            text-align      : center;
            background-color: #fff;
            font-size       : 16px;
            display         : block;
            border          : 1px solid @gray-lighter;
            border-left     : none;
            padding         : 8px;
            color           : #999;
            cursor          : pointer;
            // width        : 33.33%;

            &:first-child {
                border-left: 1px solid #e5e5e5;
            }

            //a {
            text-decoration: none;

            &.active {
                color      : @brand-primary;
                font-weight: bold;
            }
        }
    }
}

//=============================================================================